<template>
  <div>
    <h2>系统资源监控</h2>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-tooltip />
      <v-axis />
      <v-legend />
      <v-smooth-line position="month*temperature" color="city" shape="smooth" />
      <v-point position="month*temperature" color="city" shape="circle" />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set')

const sourceData = [
  { month: 'Jan', CPU: 7.0, '内存': 3.9 },
  { month: 'Feb', CPU: 6.9, '内存': 4.2 },
  { month: 'Mar', CPU: 9.5, '内存': 5.7 },
  { month: 'Apr', CPU: 14.5, '内存': 8.5 },
  { month: 'May', CPU: 18.4, '内存': 11.9 },
  { month: 'Jun', CPU: 21.5, '内存': 15.2 },
  { month: 'Jul', CPU: 25.2, '内存': 17.0 },
  { month: 'Aug', CPU: 26.5, '内存': 16.6 },
  { month: 'Sep', CPU: 23.3, '内存': 14.2 },
  { month: 'Oct', CPU: 18.3, '内存': 10.3 },
  { month: 'Nov', CPU: 13.9, '内存': 6.6 },
  { month: 'Dec', CPU: 9.6, '内存': 4.8 },
]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'fold',
  fields: ['CPU', '内存','硬盘'],
  key: 'city',
  value: 'temperature',
})
const data = dv.rows

const scale = [
  {
    dataKey: 'month',
    min: 0,
    max: 1,
  },
]

export default {
  data() {
    return {
      data,
      scale,
      height: 300,
    }
  },
}
</script>
